<template>
	<view class="context">
		<view class="select">
			<u-cell-group>
				<u-cell-item title="选择币种" :title-style="{fontSize:'32rpx',fontWeight:'bold'}" value="BTC"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="box">
			<view class="qr">
				<view>
					<image src="/static/qr.png"></image>
				</view>
				<u-button plain type="primary" size="mini" class="save">保存二维码</u-button>
				<view class="qr-info">12epFDHJHJKSDwnTRDGFS32ced56SfvdY</view>
			</view>
			<button class="copy">复制充币链接</button>
		</view>
		<view class="info">
			<view class="info-title">充值说明:</view>
			<view>1.请勿向上述地址任何非选中币种资产，否则资产将不可找回。请
				勿向上述地址任何非选中币种资产，否则资产将不可找回。</view>
			<view>
				2.请勿向上述地址任何非选中币种资产，否则资产将不可找回。</view>
		</view>
	</view>
</template>

<script>
import { mapGetters, mapMutations, mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      selectShow: false,
      selectedSymbol: null,
      address: "",

      size: 400, // 二维码大小
      unit: "upx", // 单位
      onval: true, // val值变化时自动重新生成二维码
      loadMake: true, // 组件加载完成后自动生成二维码
      src: "", // 二维码生成后的图片地址或base64
      labelText: "", // 充币说明
      ex_show: false,
    };
  },
  watch: {
    async selectedAsset(asset, oldAsset) {
      if (asset != oldAsset && asset.coin.recharge_state != 0) {
        this.address = await this.loadCoinAddress({ chain: asset.coin.chain });
      }
    },
  },
  computed: {
    ...mapGetters("asset", ["assets"]),
    selectedAsset() {
      const asset =
        this.assets.find((asset) => asset.symbol == this.selectedSymbol) ||
        this.assets[0];

      return asset;
    },
  },
  async onLoad({ symbol }) {
    if (symbol) {
      this.selectAssetBySymbol(symbol);
    }
  },
  async onShow() {
    await this.loadAssets();
    await this.loadLabel();
  },
  methods: {
    ...mapActions("asset", ["loadAssets", "loadCoinAddress"]),
    ...mapActions("system", ["getLabel"]),
    selectAssetBySymbol(symbol) {
      this.selectedSymbol = symbol;
      this.selectShow = false;
    },
    selectAssetByIndex(index) {
      const asset = this.assets[index] || this.assets[0];
      this.selectAssetBySymbol(asset.symbol);
    },
    async loadLabel() {
      let data = await this.getLabel("system.recharge.explain");
      this.labelText = data
        .replace(
          "{recharge_min}",
          parseFloat(this.selectedAsset.coin.recharge_min)
        )
        .replace(/{symbol}/g, this.selectedAsset.symbol);
    },
  },
};
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
		height: 100vh;
	}

	.select {
		margin-top: 25rpx;
	}

	.copy {
		width: 702rpx;
		height: 88rpx;
		background: #2A96EE;
		border-radius: 12rpx;
		color: #fff;
		margin: 20rpx auto;
	}

	.box {
		margin-top: 50rpx;

		.qr {
			text-align: center;

			image {
				width: 280rpx;
				height: 280rpx;
			}

			.save {
				margin: 20rpx auto;
			}
			
			.qr-info{
				font-size: 24rpx;
			}
		}
	}
	
	.info{
		padding: 20rpx;
		margin-top: 100rpx;
		color: #999;
		font-size: 24rpx;
		.info-title{
			margin-bottom: 30rpx;
			font-size: 28rpx;
		}
	}
</style>
